<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>院系管理</title>
  <link rel="stylesheet" href="./decoration.css">
</head>

<body>
  <!-- 栏目 -->
  <div class="nav">院系管理</div>
  <!-- 表格主体部分 -->
  <div class="TableBackground">
    <!-- 标题表格 -->
    <table style="margin-top: 60px;">
      <button class="insert">添加 <i class="iconfont">&#xe604;</i></button>
      <tr>
        <th>院系号</th>
        <th>院系名</th>
        <th>学生总人数</th>
        <th>教师总人数</th>
        <th>院系主任</th>
        <th>联系电话</th>
        <th>创建时间</th>
        <th>操作</th>
      </tr>
      <!-- 数据表格 -->
      <table class="list" style="margin-bottom: 60px;">

      </table>
    </table>
    <!-- 表格控制栏 -->
    <div class="controlTable">
      <ul>
        <li class="first"><i class="iconfont">&#xe605;</i></li>
        <li class="last"><i class="iconfont">&#xe618;</i></li>
        &nbsp;<b>|</b>&nbsp; <input type="text" class="paged">
        共 <span class="allPage">0</span> 页 &nbsp;<b>|</b>&nbsp;
        <li class="next"><i class="iconfont">&#xe619;</i></li>
        <li class="theLast"><i class="iconfont">&#xe606;</i></li>
        <select name="paged" id="paged">
          <option value="5">5</option>
          <option value="10">10</option>
          <option value="20">20</option>
        </select>
      </ul>
    </div>
  </div>
  <!-- 添加院系弹窗 -->
  <div class="insertShow">
    <h2 class="title">添加院系</h2>
    <div>
      <h3><i class="iconfont">&#xe6f8;</i> 院系号： <input type="text" placeholder=" 3位数字的院系号"></h3>
      <h3><i class="iconfont">&#xe6f9;</i> 院系名： <input type="text" placeholder=" 院系名不能超过15位"></h3>
      <h3><i class="iconfont">&#xe6fb;</i> 系主任： <input type="text"></h3>
      <h3><i class="iconfont">&#xe6fa;</i> 联系电话： <input type="text"></h3>
    </div>
    <div class="buttons">
      <button class="cancel">取消</button>
      <button class="add">添加</button>
    </div>
  </div>
  <!-- 修改院系弹窗 -->
  <div class="insertShow updateShow">
    <h2 class="title">更新信息</h2>
    <div>
      <h3><i class="iconfont">&#xe6f8;</i> 院系号： <input type="text" placeholder=" 3位数字的院系号"></h3>
      <h3><i class="iconfont">&#xe6f9;</i> 院系名： <input type="text" placeholder=" 院系名不能超过15位"></h3>
      <h3><i class="iconfont">&#xe6fb;</i> 系主任： <input type="text"></h3>
      <h3><i class="iconfont">&#xe6fa;</i> 联系电话： <input type="text"></h3>
    </div>
    <div class="buttons">
      <button class="cancel">取消</button>
      <button class="update">更新</button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="./operation.js"></script>
</body>

</html>